<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-col :span="24">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="文件名">
                <el-input v-model="formInline.name" placeholder="请输出要导出的文件名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">导出选中行</el-button>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="24" class="table">
            <el-table
              :data="tableData"
              border
              @selection-change="handleSelectionChange"
              style="width: 100%"
            >
              <el-table-column
                type="selection"
                width="55"
              >
              </el-table-column>
              <el-table-column
                type="index"
                label="序号"
                width="50"
              >
              </el-table-column>
              <el-table-column
                prop="title"
                label="标题"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
              >
              </el-table-column>
              <el-table-column
                prop="clickNum"
                label="访问量"
              >
              </el-table-column>
              <el-table-column
                prop="date"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
              >
              </el-table-column>
            </el-table>
          </el-col>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import axios from 'axios'
import { xlsx } from '@/utils/excel'

export default {
  name: 'index',
  data() {
    return {
      xlsx: xlsx,
      formInline: {
        name: ''
      },
      tableData: [],
      multipleSelection: []
    }
  },
  methods: {
    onSubmit() {
      let name
      if (this.formInline.name === '') {
        name = 'admin'
      } else {
        name = this.formInline.name
      }
      if (this.multipleSelection.length===0){
        this.$message.error('你至少要选中一行');
      }else {
        this.xlsx(this.multipleSelection, {
          id: '序号',
          title: '标题',
          name: '姓名',
          clickNum: '访问量',
          date: '日期',
          address: '地址'
        }, name)
      }
    },
    fetchData() {
      axios.get('http://route.showapi.com/90-27').then(res => {
        this.tableData = res.data._data.data.rows
      }).catch(err => {
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }

  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-bottom: 50px;

  ::v-deep.el-form-item__label {
    font-weight: 400;
  }

  .table {
    margin-top: 20px;
    padding-bottom: 20px;

    ::v-deep.el-icon-rank {
      cursor: move;
    }

    ::v-deep.cell {
      font-size: 14px;
      font-weight: 400;
      color: #000;
      text-overflow: unset;
      text-align: center;
    }

    ::v-deep.el-date-editor.el-input, ::v-deep.el-date-editor .el-input__inner {
      width: 137px;
    }
  }
}
</style>
